<template>
<div>
  <el-dialog
    :title="title"
    :close-on-click-modal="false"
     v-dialogDrag
    :visible.sync="visible">
    <el-form :model="inputForm" ref="inputForm" v-loading="loading" :class="method==='view'?'readonly':''"  :disabled="method==='view'"
             label-width="120px">
      <el-row  :gutter="15">
     <!--   <el-col :span="12">
            <el-form-item label="产线" prop="basicdataLine"
                :rules="[
                 ]">
              <el-input v-model="inputForm.basicdataLine" placeholder="请填写产线"     ></el-input>
           </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="作业区" prop="basicdataWorkRegion"
                :rules="[
                 ]">
              <el-input v-model="inputForm.basicdataWorkRegion" placeholder="请填写作业区"     ></el-input>
           </el-form-item>
        </el-col> -->
        <el-col :span="12">
            <el-form-item label="设备名称"  prop="basicdataMainEquipment"
                :rules="[
                 ]">
              <el-input disabled v-model="names" placeholder="请填写主体设备"  ></el-input>
           </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="部件名称" prop="basicdataPart"
                :rules="[
                   {required: true, message:'部件不能为空', trigger:'blur'}
                 ]">
              <!-- <el-input v-model="inputForm.basicdataPart" placeholder="请填写部件"     ></el-input> -->
               <el-select v-model="inputForm.basicdataPart" placeholder="请选择部件" style="width:100%;" v-loading = 'isOneDropDownBoxLoading' :disabled=isOneDropDownBoxLoading>
                <el-option v-for="item in inputForm.partsData" :key="item.id" :label="'[' + item.code + ']' +item.name" :value="item.id" ref="units"></el-option>
               </el-select>
           </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="零件名称" prop="basicdataConponent"
                :rules="[
                 ]">
              <!-- <el-input v-model="inputForm.basicdataConponent" placeholder="请填写零件"     ></el-input> -->
              <!-- <el-form-item label="零件名称" prop="part" :rules="[]" > -->
               <el-select v-model="inputForm.basicdataConponent" placeholder="请选择零件名称" style="width:100%;" v-loading = 'isTwoDropDownBoxLoading' :disabled=isTwoDropDownBoxLoading>
                 <el-option v-for="item in inputForm.componentData" :key="item.id" :label= "'[' + ']' +item.name" :value="item.id + ',' + item.erpMaterialId" ref="part"></el-option>
               </el-select>
           </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="油品型号" prop="basicdataOilType"
                :rules="[
                 ]">
                <el-input v-model="inputForm.basicdataOilType" placeholder="请填写油品型号"  disabled   ></el-input>
           </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="检验周期" prop="basicdataCheckPeriod"
                :rules="[
                  {required: true, message:'检验周期不能为空', trigger:'blur'}
                 ]">
                 <el-input-number  style="width: 80%;" v-model="num" :min="1" :max="12" label="请选择建店周期"></el-input-number>
              <el-input v-model="day" disabled style="width: 20%;"></el-input>
           </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="清洁度" prop="basicdataCleanlness"
                :rules="[
                 ]">
              <el-input v-model="inputForm.basicdataCleanlness" placeholder="请填写清洁度"     ></el-input>
           </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="运动粘度" prop="basicdataSportViscosity"
                :rules="[
                 ]">
              <el-input v-model="inputForm.basicdataSportViscosity" placeholder="请填写运动粘度"     ></el-input>
           </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="酸值" prop="basicdataAuidValue"
                :rules="[
                 ]">
              <el-input v-model="inputForm.basicdataAuidValue" placeholder="请填写酸值"     ></el-input>
           </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="水分" prop="basicdataWater"
                :rules="[
                 ]">
              <el-input v-model="inputForm.basicdataWater" placeholder="请填写水分"     ></el-input>
           </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="抗乳化" prop="basicdataRepelCreaming"
                :rules="[
                 ]">
              <el-input v-model="inputForm.basicdataRepelCreaming" placeholder="请填写抗乳化"     ></el-input>
           </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="凝点" prop="basicdataCondensationPoint"
                :rules="[
                 ]">
              <el-input v-model="inputForm.basicdataCondensationPoint" placeholder="请填写凝点"     ></el-input>
           </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="倾点" prop="basicdataPourPoint"
                :rules="[
                 ]">
              <el-input v-model="inputForm.basicdataPourPoint" placeholder="请填写倾点"     ></el-input>
           </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="责任人" prop="basicdataDutyPeople.id"
                :rules="[
                  {required: true, message:'请选择责任人', trigger:'blur'}
                 ]">
                <user-select :limit='1' :value="inputForm.basicdataDutyPeople.id" @getValue='(value) => {inputForm.basicdataDutyPeople.id=value}'></user-select>
           </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="检验人" prop="basicdataCheckMan.id"
                :rules="[
                  {required: true, message:'请选择检验人', trigger:'blur'}
                 ]">
                <user-select :limit='1' :value="inputForm.basicdataCheckMan.id" @getValue='(value) => {inputForm.basicdataCheckMan.id=value}'></user-select>
           </el-form-item>
        </el-col>
        </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close()">关闭</el-button>
      <el-button type="primary" v-if="method != 'view'" @click="doSubmit()" v-noMoreClick>确定</el-button>
    </span>
  </el-dialog>
</div>
</template>

<script>
  import UserSelect from '@/components/userSelect'
  export default {
    data () {
      return {
        num: 1,
        day: '月',
        names: '',
        title: '',
        method: '',
        visible: false,
        loading: false,
        inputForm: {
          partDevice: {
            id: '',
            code: '',
            name: ''
          },
          id: '',
          basicdataLine: '',
          basicdataWorkRegion: '',
          basicdataMainEquipment: '',
          basicdataPart: '',
          basicdataConponent: '',
          basicdataOilType: '',
          basicdataCheckPeriod: '',
          basicdataCleanlness: '',
          basicdataSportViscosity: '',
          basicdataAuidValue: '',
          basicdataWater: '',
          basicdataRepelCreaming: '',
          basicdataCondensationPoint: '',
          basicdataPourPoint: '',
          unitName: '',
          basicdataDutyPeople: {
            id: ''
          },
          basicdataCheckMan: {
            id: ''
          },
          partsData: [], // 部件数据
          componentData: [] // 零件数据
        },
        parts: '', // 首级下拉框prop
        component: '', // 子级下拉框prop
        countfirst: 0,
        isOneDropDownBoxLoading: false, // 判断一级下拉框是否正在加载数据
        isTwoDropDownBoxLoading: false, // 判断二级下拉框是否正在加载数据
        fileDevicename: '' // 设备名称
      }
    },
    watch: {
      // 监测设备名称编号变化(监听某个对象里面的某个固定属性时候所用如inputForm.partDevice.id)
      // 深度监听
      'inputForm.partDevice.id': function (newVal, oldVal) {
        this.getNextNode(newVal)
      },
      'inputForm.basicdataMainEquipment': function (newVal, oldVal) {
        console.log(newVal)
      },
      // 监测首级下拉框变化
      'inputForm.basicdataPart': function (newVal, oldVal) {
        console.log(newVal)
        if (this.isOneDropDownBoxLoading === true) {
         this.isOneDropDownBoxLoading = false
        }
        if (newVal !== '') {
          this.dropDownBoxAssociated(newVal)
        }
      },
      'inputForm.basicdataConponent': function (newVal, oldVal) {
        console.log(newVal.split(','))
          // this.oilId = newVal.split(',')[0]
          this.productTypeReturn(newVal.split(',')[0], newVal.split(',')[1])
      }
    },
    components: {
      UserSelect
    },
    methods: {
      // 发送油品型号方法返回油品型号
      productTypeReturn (id, erpMaterialId) {
        this.$http({
          url: `/spareparts/material/sparepartsMaterialCodeData/queryById?id=${erpMaterialId}`,
          method: 'get'
        }).then(({ data }) => {
          this.inputForm.basicdataOilType = data.sparepartsMaterialCodeData.sparepartsType
        })
        this.$http({
          url: `/basicdata/basictree/partDeviceNode/queryById?id=${id}`,
          method: 'get'
        }).then(({ data }) => {
          this.inputForm.unitName = data.partDeviceNode.name
        })
      },
      // 获取下一层级节点
      // 需要传入想要获取下一级树的数据的父级id参数（比如传三级id此方法获取4级数据）
      getNextNode (presentNode) {
        this.isOneDropDownBoxLoading = true
        this.$http({
          url: `/basicdata/basictree/partDeviceNode/nextLevelTreeData`,
          method: 'get',
          params: {
            id: presentNode
          }
        }).then(({ data }) => {
          this.inputForm.partsData = data.data
          this.isOneDropDownBoxLoading = false
        })
      },
      close () {
        this.visible = false
        this.countfirst = 0
      },
      init (method, id, partDevice) {
        this.inputForm.componentData = ''
        // this.inputForm.basicdataPart = ''
        this.inputForm.basicdataConponent = ''
        this.num = 1
        this.inputForm.basicdataCheckPeriod = ''
        this.method = method
        this.fileDevicename = partDevice.name
        this.names = '[' + partDevice.code + ']' + partDevice.name
        this.inputForm.id = id
        this.inputForm.partDevice.id = partDevice.id
        this.inputForm.partDevice.name = partDevice.name
        this.countfirst = 0
        this.parts = '' // 首级下拉框prop做清空处理
        this.component = '' // 子级下拉框prop做清空处理
        if (method === 'add') {
          this.title = `新建油品检化验标准`
        } else if (method === 'edit') {
          this.title = '修改新建油品检化验标准'
        } else if (method === 'view') {
          this.title = '查看新建油品检化验标准'
        }
        this.visible = true
        this.loading = false
        this.$nextTick(() => {
          this.inputForm.partDevice.id = partDevice.id
          this.$refs.inputForm.resetFields()
          if (method === 'edit' || method === 'view') { // 修改或者查看
            this.loading = true
            this.$http({
              url: `/basicdata/standard/basicdataOilCheckStanarrd/queryById?id=${this.inputForm.id}`,
              method: 'get'
            }).then(({data}) => {
              this.inputForm = this.recover(this.inputForm, data.basicdataOilCheckStanarrd)
              this.inputForm.basicdataMainEquipment = '[' + partDevice.code + ']' + this.inputForm.basicdataMainEquipment
              this.num = this.inputForm.basicdataCheckPeriod.substring(0, this.inputForm.basicdataCheckPeriod.length - 1)
              // // 修改和查看需要执行下列两列回调赋值下拉框prop
              // this.parts = this.5.basicdataPart
              // this.component = this.inputForm.basicdataConponent
              this.getNextNode(partDevice.id)
              this.loading = false
            })
          }
        })
      },
      // 二级下拉框与一级下拉框关联方法(传的参数是一级下拉框的id值)
      dropDownBoxAssociated (newVal) {
        this.isTwoDropDownBoxLoading = true
        console.log(newVal)
        if (this.countfirst >= 1) {
          // this.component = ''
          this.inputForm.basicdataConponent = ''
        } else {
          this.countfirst = this.countfirst + 1
        }
        this.$http({
          url: `/basicdata/basictree/partDeviceNode/nextLevelTreeData`,
          method: 'get',
          params: {
            id: newVal
          }
        }).then(({ data }) => {
          this.inputForm.componentData = data.data
          this.isTwoDropDownBoxLoading = false
        })
      },
      // 表单提交
      doSubmit () {
        this.inputForm.basicdataMainEquipment = this.fileDevicename
        this.inputForm.basicdataCheckPeriod = this.num + this.day
        this.countfirst = 0
        this.$refs['inputForm'].validate((valid) => {
          if (valid) {
            this.loading = true
            this.$http({
              url: `/basicdata/standard/basicdataOilCheckStanarrd/save`,
              method: 'post',
              data: this.inputForm
            }).then(({data}) => {
              if (data && data.success) {
                this.visible = false
                this.$message.success(data.msg)
                this.$emit('refreshDataList')
              }
              this.loading = false
            })
          }
        })
      }
    }
  }
</script>
